<template>
    <div>
        <el-row style="background-color:#E4E7ED">
            <el-col :span="8">
                <div class="demo-image" style="padding-left:50%">
                    <img src="../assets/warren_market.png" style="width: 240px; height: 180px">
                </div>
            </el-col>
            <el-col :span="8" style="padding-top:4%">
                <div class="demo-input-suffix" style="padding-left:50px">
                    <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input" style="width:600px">
                        <el-button slot="append" icon="el-icon-search" @click="handleClick"></el-button> <!--将文本内容输出到data里的input中 这个button绑定方法获取input数据进行axios-->
                    </el-input>
                </div>
            </el-col>
        </el-row>
        <el-row style="background-color:#606266;height:50px">
              <el-link :underline="false" target="_blank" style="color:white;font-size:20px;padding-top:10px;padding-left:250px">{{this.tableData.shop}}</el-link>
        </el-row>
        <el-row :gutter="20">
            <div style="height:500px">
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <div class="block" style="padding-top:50px;padding-left:200px">
                            <el-carousel height="290px">
                                <el-carousel-item v-for="item in 5" :key="item">
                                    <img :src="require('../assets/'+category+'/'+id+'/'+item+'.jpg')" height="100%" width="100%">
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                    </div>
                </el-col>
                <el-col :span="16">
                    <div style="padding-top:50px;padding-left:50px">
                        <p style="font-size:20px"><b>{{this.tableData.title}}</b></p>
                        <el-row style="padding-top:50px">
                            <el-col :span="2"><div class="grid-content bg-purple">价 格：</div></el-col>
                            <el-col :span="2" style="font-size:18px;color:red"><div class="grid-content bg-purple-light">￥{{this.tableData.price}}</div></el-col>
                        </el-row>
                        <el-row style="padding-top:50px">
                            <el-col :span="2"><div class="grid-content bg-purple" style="padding-top:7px">数 量：</div></el-col>
                            <el-col :span="2" style="font-size:18px;color:red">
                            <div style="width:200px">
                                <el-input v-model="productnum" placeholder="请输入数量"></el-input>
                            </div>
                            </el-col>
                            <el-col :span="6" style="padding-top:7px"><p style="color:black;float:right">库存：{{this.tableData.stock}}</p></el-col>
                        </el-row>
                        <el-row style="padding-top:50px">
                            <el-button type="warning" @click="pay">立即购买</el-button>
                        </el-row>
                    </div>
                </el-col>
            </div>
        </el-row>
        <el-row>
              <el-tabs @tab-click="comment" style="padding-left:200px">
                  <el-tab-pane label="评论区" name="first">
                      <div v-for="comment in comments" :key="comment">
                            <el-row :gutter="20" style="padding-top:30px">
                                <el-col :span="16"><div class="grid-content bg-purple"><p>{{comment.commenttext}}</p></div></el-col>
                                <el-col :span="8">
                                    <div class="grid-content bg-purple">
                                        <p>评论人：{{comment.username}}</p>
                                        <p style="padding-top:10px">评论时间：{{comment.createdate}}</p>
                                    </div>
                                </el-col>
                            </el-row>
                      </div>
                  </el-tab-pane>
              </el-tabs>
        </el-row>
    </div>
</template>

<script>
export default {
    name: "detail",
    data(){
        return{
            category: '',
            id: '',
            tableData: [],
            input: '',
            productnum: '',
            comments: [],
        }
    },
    mounted(){
        this.$axios.get("/api/getDetail?id="+this.$route.query.id+"&category="+this.$route.query.category).then(res=>{
            this.id = this.$route.query.id,
            this.category = this.$route.query.category,
            this.tableData = res.data,
            console.log(this.tableData)
        });
    },
    methods: {
        handleClick() {
            this.$router.push("/productsshow?title="+this.input)
        },
        comment() {
            this.$axios.get("/api/getComment?id="+this.$route.query.id+"&category="+this.$route.query.category).then(res=>{
                this.comments = res.data
            });
        },
        pay(){
            this.$router.push("/paypage?id="+this.$route.query.id+"&category="+this.$route.query.category+"&title="+this.tableData.title+"&price="+this.tableData.price+"&product_nums="+this.productnum+"&shopname="+this.tableData.shop)
        }
    }
}
</script>